<template>
  <div class="about">
    <el-row :gutter="20">
      <el-col>首页</el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <el-row>
            <el-col :span="24"></el-col>
            <lmsCard label="机构数量" num="100" unit="家" :type="1" />
          </el-row>
          <el-divider />
          <el-row>
            <el-col :span="8" class="borderCol">
              <lmsCard label="实验室" num="500" unit="家" :type="2" />
            </el-col>
            <el-col :span="8" class="borderCol">
              <lmsCard label="委托方" num="30" unit="家" :type="2" />
            </el-col>
            <el-col :span="8">
              <lmsCard label="供应商" num="20" unit="家" :type="2" />
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-row  :gutter="20">
          <el-col :span="12">
            <el-card>
               <lmsCard label="机构数量" num="100" unit="家" :type="1" />
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
               <lmsCard label="机构数量" num="100" unit="家" :type="1" />
            </el-card>
          </el-col>
        </el-row>
        <el-row  :gutter="20">
          <el-col :span="12">
            <el-card>
               <lmsCard label="机构数量" num="100" unit="家" :type="1" />
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card >
               <lmsCard label="机构数量" num="100" unit="家" :type="1" />
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="20">      
      <el-col>
        <el-card class="filterBox">
          <div class="filter">
            <lmsFilter :filterConfig='filter'/>
          </div>
        <el-tabs v-model="activeTab" @tab-click="handleClick">
        <el-tab-pane label="实验室" name="first">
          <lmsTable :tableData='table.tableData' :tableConfig='table.tableConfig' />
        </el-tab-pane>
        <el-tab-pane label="委托方" name="second">委托方</el-tab-pane>
        <el-tab-pane label="供应商" name="third">供应商</el-tab-pane>
        </el-tabs>
       </el-card>
      </el-col>
    </el-row>
    <el-dialog :visible.sync ='confirmDel'>
     此操作将永久删除
    </el-dialog>
  </div>
</template>
<script>
import lmsTable from "@/components/lmsTable";
import lmsFilter from "@/components/lmsFilter";
import lmsCard from "./lmsCard.vue";
export default {
  data() {
    return {
      table: {
        tableData: {
          data: [
            {
              name: "某某实验室1",
              director: "王工",
              tel: "15188888888",
              adress: "深圳市宝安区宝安大道100号",
              account: "012345",
              password: "12345",
              ifDisabled: "启用",
              createDate: "2021.04.10 10:10:00",
            },
          ],
        },
        tableConfig: {
          showIndex: true,
          columns: [
            {
              fieldName: "name",
              label: "名称",
            },
            {
              fieldName: "director",
              label: "负责人",
            },
            {
              fieldName: "tel",
              label: "联系方式",
            },
            {
              fieldName: "adress",
              label: "地址",
            },
            {
              fieldName: "account",
              label: "账号",
            },
            {
              fieldName: "password",
              label: "密码",
            },
            {
              fieldName: "ifDisabled",
              label: "禁用/启用",
            },
            {
              fieldName: "createDate",
              label: "创建时间",
            },
            {
              label: "操作",
              type: "handle",
              buttons: [
                {
                  label: "查看",
                  func: () => {},
                },
                {
                  label: "编辑",
                  func: () => {},
                },
                {
                  label: "删除",
                  func: () => {this.confirmDel = true},
                  isDel: true,
                },
              ],
            },
          ],
        },
      },
      activeTab:"first",
      confirmDel:false,
      filter:{
        label:'公司名',
        placehoder:'请输入公司名',
        buttons:[
          {
            label:'搜索',
            func:()=>{
              console.log('点击搜索')
            }
          },
          {
            label:'新增',
             func:()=>{
              console.log('点击搜索')
            }
          }
        ]
      }
    };
  },
  components: {
    lmsTable,
    lmsCard,
    lmsFilter
  },
  methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
};
</script>
<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.borderCol {
  border-right: 1px solid #000;
}
.filterBox{
  position: relative;
}
.filter{
  width: 100%;
  position: absolute;
  left:300px;
  top:25px;
  z-index: 999;
}
</style>